<template>
  <div class="allContain" :style="allContain">
    <div>
      <nav-tab class="homeNav"></nav-tab>
      <!-- search -->
      <div class="search">
        <el-row :gutter="20">
          <el-col :span="12" :offset="4">
            <div>
              <el-input placeholder="请输入内容" v-model="searchInput" class="input-with-select">
                <el-select v-model="select" slot="prepend" placeholder="请选择">
                  <el-option :label="typesItem.value" :value="typesItem.key" v-for="typesItem in typesArr" :key="typesItem.key"></el-option>
                </el-select>
              </el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <el-button type="primary">搜索</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" :offset="4">
            <el-row>
              <el-col :span="4" class="spanClass pointer" v-for="hotkeyItem in hotkey" :key="hotkeyItem">{{hotkeyItem}}</el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <!-- login -->
      <div class="login">
        <el-row :gutter="20">
          <el-col :span="18">
            <el-carousel>
              <el-carousel-item
                v-for="item in banners"
                :key="item.thumb"
                class="size880367 imgContains"
              >
                <img :src="getImgUrl(item.thumb)" class="cupointer" alt="" @click="See(item.url)">
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="6">
            <el-row class="bgWhite padding10">
              <el-col :span="24">
                <el-row>
                  <el-col :span="4" :offset="10">
                    <span class="iconfont iconyonghu size60"></span>
                  </el-col>
                </el-row>
                <el-row class="marginTop20">
                  <el-col :span="12" class="textCenter">
                    <el-button type="default" size="small" class="width115">13435663920</el-button>
                  </el-col>
                  <el-col :span="12" class="textCenter">
                    <el-button type="primary" size="small" class="width115">成为供应商</el-button>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <!-- 消息 -->
            <el-row class="msg bgWhite">
              <el-col :span="24">
                <el-row class="energyTitle">
                  <el-col :span="16" class="energy">
                    <i class="el-icon-edit"></i>&nbsp;&nbsp;能源头条
                  </el-col>
                  <el-col :span="8">
                    <el-row>
                      <el-col :span="24" class="textRight">更多》</el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <el-row class="energyContent pointer" @click.native="toArticleDetail(item.id)" v-for="item in articleList" :key="item.title">
                  <el-col :span="6" class="overEclipse">【{{item.title}}】</el-col>
                  <el-col :span="18" class="overEclipse">{{item.tag}}</el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <!-- program -->
      <div class="program">
        <!-- //解决方案 -->
        <div class="programTitle">
          <el-row>
            <el-col :span="12" class="programRecommond colorWhite">解决方案推荐</el-col>
            <el-col :span="12" class="textRight checkMore">
              <el-button type="text" class="colorWhite" @click.native="toSolution">查看更多</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" class="singleProgram programList pointer" @click.native="toSolutionDetail" v-for="solutionItem in solution" :key="solutionItem.corpId">
              <el-row class="bgWhite">
                <el-col :span="24" class="imgContain">
                  <img :src="getImgUrl(solutionItem.thumb)" alt="">
                </el-col>
                <el-col :span="24" class="companyTitle">{{solutionItem.corpName}}ssss</el-col>
                <el-col :span="24" class="companyContent height40 overEclipse">
                  {{solutionItem.summary}}
                </el-col>
                <el-col :span="24" class="companyBtn height48">
                  <el-tag size="mini" color="#6fbc85" class="colorWhite" v-for="(btnItem,index) in solutionItem.tags" v-show="btnItem" v-if="index==0" :key="btnItem">{{btnItem}}</el-tag>
                  <el-tag size="mini" color="#00c1de" class="colorWhite" v-for="(btnItem,index) in solutionItem.tags" v-show="btnItem" v-if="index==1" :key="btnItem">{{btnItem}}</el-tag>
                  <el-tag size="mini" color="#deb85e" class="colorWhite" v-for="(btnItem,index) in solutionItem.tags" v-show="btnItem" v-if="index==2" :key="btnItem">{{btnItem}}</el-tag>
                </el-col>
                <el-col :span="24" class="companyBorder">
                  <el-col :span="2">
                    <div class="imgContains size20">
                      <img :src="getImgUrl(solutionItem.corpLogo)" alt="">
                    </div>
                  </el-col>
                  <el-col :span="20">{{solutionItem.corpName}}</el-col>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <!-- 成功案例 -->
        <div class="programTitle">
          <el-row>
            <el-col :span="12" class="programRecommond">成功案例推荐</el-col>
            <el-col :span="12" class="textRight checkMore">
              <el-button type="text" class="color666" @click.native="toSuccessCase">查看更多</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" class="singleProgram programList pointer" @click.native="toSuccessCaseDetail" v-for="solutionItem in cases" :key="solutionItem.corpId">
              <el-row class="bgWhite">
                <el-col :span="24" class="imgContain">
                  <img :src="getImgUrl(solutionItem.thumb)" alt="">
                </el-col>
                <el-col :span="24" class="companyTitle">{{solutionItem.corpName}}</el-col>
                <el-col :span="24" class="companyContent height40">
                  {{solutionItem.summary}}
                </el-col>
                <el-col :span="24" class="companyBtn height48">
                  <el-tag size="mini" color="#6fbc85" class="colorWhite" v-for="(btnItem,index) in solutionItem.tags" v-show="btnItem" v-if="index==0" :key="btnItem">{{btnItem}}</el-tag>
                  <el-tag size="mini" color="#00c1de" class="colorWhite" v-for="(btnItem,index) in solutionItem.tags" v-show="btnItem" v-if="index==1" :key="btnItem">{{btnItem}}</el-tag>
                  <el-tag size="mini" color="#deb85e" class="colorWhite" v-for="(btnItem,index) in solutionItem.tags" v-show="btnItem" v-if="index==2" :key="btnItem">{{btnItem}}</el-tag>
                </el-col>
                <el-col :span="24" class="companyBorder">
                  <el-col :span="2">
                    <div class="imgContains size20">
                      <img :src="getImgUrl(solutionItem.corpLogo)" alt="">
                    </div>
                  </el-col>
                  <el-col :span="20">{{solutionItem.corpName}}</el-col>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </div>
        <!-- 项目服务推荐 -->
         <div class="programTitle bgindexBanner ">
           <div class="width1200 margin0auto">
            <el-row>
              <el-col :span="12" class="programRecommond colorWhite">项目服务推荐</el-col>
              <el-col :span="12" class="textRight checkMore">
                <el-button type="text" class="colorWhite" @click.native="toProjectServices">查看更多</el-button>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8" class="singleProgram programList pointer" @click.native="toProjectServicesDetail" v-for="solutionItem in project" :key="solutionItem.corpId">
                <el-row class="bgWhite">
                  <el-col :span="12" class="imgContains size132a121">
                    <img :src="getImgUrl(solutionItem.thumb)" alt="">
                  </el-col>
                  <el-col :span="12" class="companyTitle">
                    <el-row>
                      <el-col :span="24">
                        {{solutionItem.corpName}}
                      </el-col>
                    </el-row>
                    <el-row class="companyContent height40 overEclipse padding0">
                      <!-- <el-col :span="24" class="companyContent height40 overEclipse"> -->
                        {{solutionItem.summary}}
                      <!-- </el-col> -->
                    </el-row>
                    <el-row>
                      <el-col :span="24" class="companyBtn height48">
                        <el-tag size="mini" color="#6fbc85" class="colorWhite" v-for="(btnItem,index) in solutionItem.tags" v-show="btnItem" v-if="index==0" :key="btnItem">{{btnItem}}</el-tag>
                        <el-tag size="mini" color="#00c1de" class="colorWhite" v-for="(btnItem,index) in solutionItem.tags" v-show="btnItem" v-if="index==1" :key="btnItem">{{btnItem}}</el-tag>
                        <el-tag size="mini" color="#deb85e" class="colorWhite" v-for="(btnItem,index) in solutionItem.tags" v-show="btnItem" v-if="index==2" :key="btnItem">{{btnItem}}</el-tag>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="24" class="companyBorder">
                    <el-col :span="2">
                      <div class="imgContains size20">
                        <img :src="getImgUrl(solutionItem.corpLogo)" alt="">
                      </div>
                    </el-col>
                    <el-col :span="20">{{solutionItem.corpName}}</el-col>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
           </div>
        </div>
        <!-- 产品推荐 -->
         <div class="programTitle">
           <div class="width1200 margin0auto">
            <el-row>
              <el-col :span="12" class="programRecommond">产品推荐</el-col>
              <el-col :span="12" class="textRight checkMore">
                <el-button type="text" class="color666" @click.native="toProducts">查看更多</el-button>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8" class="singleProgram programList pointer" @click.native="toDetail" v-for="solutionItem in device" :key="solutionItem.corpId">
                <el-row class="bgWhite">
                  <el-col :span="12" class="imgContains size132a121">
                    <img :src="getImgUrl(solutionItem.thumb)" alt="">
                  </el-col>
                  <el-col :span="12" class="companyTitle">
                    <el-row>
                      <el-col :span="24">
                        {{solutionItem.corpName}}
                      </el-col>
                    </el-row>
                    <el-row class="companyContent height40 overEclipse padding0">
                        {{solutionItem.summary}}
                    </el-row>
                    <el-row>
                      <!-- <el-col :span="24" class="companyBtn"> -->
                          <el-tag size="mini" color="#6fbc85" class="colorWhite" v-for="(btnItem,index) in solutionItem.tags" v-show="btnItem" v-if="index==0" :key="btnItem">{{btnItem}}</el-tag>
                          <el-tag size="mini" color="#00c1de" class="colorWhite" v-for="(btnItem,index) in solutionItem.tags" v-show="btnItem" v-if="index==1" :key="btnItem">{{btnItem}}</el-tag>
                          <el-tag size="mini" color="#deb85e" class="colorWhite" v-for="(btnItem,index) in solutionItem.tags" v-show="btnItem" v-if="index==2" :key="btnItem">{{btnItem}}</el-tag>
                      <!-- </el-col> -->
                    </el-row>
                  </el-col>
                 
                  <el-col :span="24" class="companyBorder">
                    <el-col :span="2">
                      <div class="imgContains size20">
                        <img :src="getImgUrl(solutionItem.corpLogo)" alt="">
                      </div>
                    </el-col>
                    <el-col :span="20">{{solutionItem.corpName}}</el-col>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
           </div>
        </div>
    </div>
    <footers></footers>
  </div>
  <!-- </ui-container> -->
</template>
<script type="text/javascript">
import { Home } from "src/router/auto-routes";
import NavTab from "../../layout/default/components/nav";
import Footers from "../../layout/default/components/footer/footer";
import { serverBaseUrl } from "src/common/setting";
import getImgUrl from "src/common/setting";
import { GET_USER_INFO } from 'src/store/getters/type';

import axios from "axios";
export default {
  data() {
    return {
      searchInput: "", //选择内容
      select: "",
      articleList: [], //文章列表
      banners: [], //banner
      solution: [], //解决方案
      cases: [], //成功案例
      project: [], //项目服务
      device: [], //产品设备
      hotkey:[],//热词
      typesArr:[],//下拉选择
      serverBaseUrl:'',
      isEnterprise:false,//是否认证企业
      isSupplier:false,//是否供应商
      allContain: {
        backgroundImage: "url(" + require("../../assets/images/bg.png") + ")"
      }
    };
  },
  mounted() {
    this.index(); //首页banner及文章列表
    this.content();//4大内容块(方案/案例/项目/设备)
    this.hotkeyMethod();//热词
    this.types()
    this.getUserInfo();//用户信息状态
  },
  methods: {
    //点击跳转文章详情
    toArticleDetail(e){
      this.$router.push({
        'name':'ArticleDetail',
        query:{
          'id':e
        }
      })
    },
    //点击跳转到解决方案广场
    toSolution(){
      this.$router.push({
        'name':'Solution'
      })
    },
    toSolutionDetail(){
      this.$router.push({
        'name':'SolutionDetail',
        query:{
          'type':'home',
        }
      })
    },
    //点击跳转到成功案例广场
    toSuccessCase(){
      this.$router.push({
        'name':'SecsuccessfulCase'
      })
    },
    toSuccessCaseDetail(){
      this.$router.push({
        'name':'successfulCaseDetail',
        query:{
          'type':'home',
        }
      })
    },
    //点击跳转到项目服务广场
    toProjectServices(){
      this.$router.push({
        'name':'ProjectServices',
      })
    },
    toProjectServicesDetail(){
      this.$router.push({
        'name':'ProjectServicesDetail',
        query:{
          'type':'home',
        }
      })
    },
    //点击跳转到产品设备广场
    toProducts(){
      this.$router.push({
        'name':'Products'
      })
    },



    async getUserInfo() {
        const { $api } = this;
          var useData = await $api.user.test();
          if(useData.code==0){
            this.isEnterprise =useData.data.auth;
            this.isSupplier = useData.data.audit;
          }else{
            this.$message.error(useData.msg);
          }
      },
    toDetail(){
      this.$router.push({
        'name':'Detail'
      })
    },
    getImgUrl(url){
      return this.utils.getImgUrl(url);
    },
    async index() {
      const { $confirm, $api, $message, $router, setUserInfo } = this;
      try {
        const data = await $api.user.apiIndex();
        if (data.code == 0) {
          const h = this.$createElement;
          this.$notify({
            title: "消息提示",
            message: h("i", { style: "color: #67C23A" }, "获取信息成功")
          });
          this.articleList = data.data.articleList;
          this.banners = data.data.banners;
        }
      } catch ({ msg }) {
        const h = this.$createElement;
        this.$notify({
          title: "消息提示",
          message: h("i", { style: "color: #ff0000" }, msg)
        });
      }
    },
    async content() {
      const { $confirm, $api, $message, $router, setUserInfo } = this;
      try {
        const data = await $api.user.apiIndexContent();
        if (data.code == 0) {
          
          this.solution = data.data.solution; //解决方案
          this.cases = data.data.cases; //成功案例
          this.project = data.data.project; //项目服务
          this.device = data.data.device; //产品设备

        }
      } catch ({ msg }) {
        const h = this.$createElement;
        this.$notify({
          title: "消息提示",
          message: h("i", { style: "color: #ff0000" }, msg)
        });
      }
    },
    async hotkeyMethod() {
      const { $confirm, $api, $message, $router, setUserInfo } = this;
      try {
        const data = await $api.user.apiIndexHotkey();
        if (data.code == 0) {
          this.hotkey = data.data; //解决方案
        }
      } catch ({ msg }) {
        const h = this.$createElement;
        this.$notify({
          title: "消息提示",
          message: h("i", { style: "color: #ff0000" }, msg)
        });
      }
    },
    async types() {
      const { $confirm, $api, $message, $router, setUserInfo } = this;
      try {
        const data = await $api.user.apiIndexTypes();
        if (data.code == 0) {
          this.typesArr = data.data; //解决方案
        }
      } catch ({ msg }) {
        const h = this.$createElement;
        this.$notify({
          title: "消息提示",
          message: h("i", { style: "color: #ff0000" }, msg)
        });
      }
    },
    
    test() {
      // this.$router.push({name:''})
      this.$router.push({ name: "Squares" });
    },
    //点击查看更多
    checkMore() {
      this.$router.push({ name: "checkMore" });
    }
  },
  components: {
    NavTab,
    Footers
  },
  name: "Home",
  created() {}
};
</script>
<style>
.el-carousel__container {
  height: 367px;
}
</style>

<style lang="scss" type="text/scss" rel="stylesheet/scss" scoped>
.homeNav{
  width: 97%;
  position: relative;
  left: 20px;
}
.bgindexBanner{
  background: url('../../assets/images/indexBanner.png') no-repeat;
}
.programTitle{
  margin-top: 60px;
  padding-bottom: 30px;
}
.input-with-select,
.el-input,
.el-input-group,
.el-input-group--prepend {
  background: #fff;
}
.companyTitle {
  background: #fff;
}
.bgWhite {
  background: #fff;
}
// .singleProgram:nth-of-type(2){
//   margin: 0 20px;
// }
// .singleProgram{
//   height: 356px;
//   background: #fff
// }
.companyBorder {
  padding: 10px 15px;
  border-top: 1px solid #cccccc;
  font-size: 13px;
  color: #cccccc;
  box-sizing: border-box;
}
.size20 {
  width: 20px !important;
  height: 20px !important;
}
.companyBtn {
  padding: 0 15px;
  margin: 10px 0;
}
.companyContent {
  padding: 0 15px;
  color: #666666;
  line-height: 20px;
  font-size: 14px;
  height: 40px;
   width: 100%;
  overflow:hidden; 
  display:-webkit-box; 

-webkit-box-orient:vertical;

-webkit-line-clamp:2; 

text-overflow:ellipsis;

display:-webkit-box; 

-webkit-box-orient:vertical;

-webkit-line-clamp:2; 
}
.companyTitle {
  padding: 0 15px;
  color: #333333;
  line-height: 40px;
  font-size: 16px;
}
.imgContain {
  width: 100%;
  height: 187px;
  background-size: contain;
  img {
    width: 100%;
    height: 100%;
  }
}
// .singleProgram{
//   background: #fff;
// }
.programList {
  margin-top: 35px;
}
.programRecommond {
  font-size: 20px;
  font-weight: 600;
}
.checkMore {
  color: #87888a;
  font-size: 12px;
}
.msg {
  margin-top: 20px;
  padding: 0 20px 20px;
  height: 200px;
  overflow: auto;
}
.energyContent {
  font-size: 10px;
  line-height: 26px;
  color: #cccccc;
}
.energyTitle {
  color: #666666;
  font-size: 13px;
}
.energyTitle {
  border-bottom: 1px solid #cccccc;
  line-height: 50px;
}
.size60 {
  font-size: 48px;
}
.search,
.login,
.program {
  width: 1200px;
  margin: 0 auto;
  margin-top: 85px;
}
.login {
  background: #f2f2f2;
  padding: 10px;
}
.spanClass {
  font-size: 13px;
  color: #fff;
  text-align: center;
  margin-top: 10px;
  border-right: 1px solid #cccccc;
}
.spanClass:nth-last-of-type(1) {
  border-right: 0;
}
.allContain {
  width: 100%;
  height: 1650px;
  background-size: 100% 100%;
}
</style>
